<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <title>附近店铺 - 高德地图</title>
  <style>html,body,#map{height:100%;margin:0;padding:0}</style>
  <script src="https://webapi.amap.com/maps?v=2.0&key=YOUR_AMAP_KEY"></script>
</head>
<body>
<div id="map"></div>
<script>
  // 替换为用户当前位置（也可用浏览器定位）
  const lng = 116.397428, lat = 39.90923; // 示例：天安门
  const brand = 'kfc'; // 示例按品牌分组
  const map = new AMap.Map('map', { zoom: 14, center: [lng, lat] });

  // 添加当前定位标记
  const me = new AMap.Marker({ position: [lng, lat], title: '我在这里' });
  map.add(me);

  fetch(`/api/shops/nearby?lat=${lat}&lng=${lng}&radius=3000&limit=20&brand=${brand}`)
    .then(r => r.json()).then(list => {
      list.forEach(s => {
        const marker = new AMap.Marker({ position: [s.lng, s.lat], title: s.name });
        marker.on('click', () => {
          fetch(`/api/shops/${s.id}/nav-url`).then(r => r.json()).then(urls => {
            window.open(urls.amap, '_blank'); // 打开高德导航
          });
        });
        map.add(marker);
      });
    });
</script>
</body>
</html>